<script setup lang="ts" name="Home01">
    //导入ref
    import { ref } from 'vue';
    //定义数据 - ref来定义基本数据类型 => 具备响应式
    let name = ref('admin');
    let n = ref(100);

    //定义方法
    function add(){
        //`ref`对象的`value`属性是响应式的
        //console.log(name)//RefImpl
        //console.log(n)//RefImpl
        //console.log(n.value)
        n.value++
    }
    function changeName(){
        name.value = 'success'
    }
</script>
<template>
    <div class="home">
        <h1>setup语法糖写法</h1>
        <h1>姓名:{{name}}</h1>
        <h4>N值:{{ n }}</h4>
        <button @click="add">点我+1</button>
        <button @click="changeName">改变name</button>

    </div>
</template>
<style>

</style>